<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- 循环数组 -->
            <!-- <li v-for="item in arr">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in arr">{{ index }} = {{ item }}</li> -->

            <!-- 循环对象 -->
            <!-- <li v-for="value in user">{{ value }}</li> -->
            <!-- <li v-for="(value,key) in user">{{ key }} = {{ value }}</li> -->
            <!-- <li v-for="(value,key,index) in user">{{ index }} = {{ key }} = {{ value }}</li> -->

            <!-- 循环数字 -->
            <!-- <li v-for="item in num">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in num">{{ index }} = {{ item }}</li> -->
            
            <!-- 循环字符串 -->
            <!-- <li v-for="item in str">{{ item }}</li> -->
            <!-- <li v-for="(item,index) in str">{{ index }} = {{ item }}</li> -->

            <!-- 循环对象数组 -->
            <li v-for="(user,index) in users" :key="index">
                <span v-for="(v,k) in user">{{ k }} = {{ v }}，</span>
            </li>
        </ul>
        <hr>

        <!-- 
            为什么要添加key属性
         -->
        <button @click="addItem">添加</button>
        <ul>
            <li v-for="(item,index) in arr" :key="item">
                <input type="checkbox" > {{ item }}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:['tom','jack','alice','mike'],
            user:{
                id:9527,
                name:'唐伯虎',
                age:25
            },
            num:5,
            str:'hello',
            users:[
                {
                    id:1001,
                    username:'aaa',
                    password:'123'
                },
                {
                    id:1002,
                    username:'bbb',
                    password:'123'
                },
                {
                    id:1003,
                    username:'ccc',
                    password:'123'
                },
            ]
        },
        methods:{
            addItem(){
                this.arr.unshift('lucy')
            }
        }
    })
</script>
</html>